<template>
  <div class="page">
    <header>购物车</header>
    <div class="shop_car_body">
      <ul>
        <li v-for="(item, index) in list" :key="item.id">
          <div class="car_list_top">
            <div class="car_list_t_l">
              <div class="input_check">
                <span
                  class="icon_gou icon_li"
                  :class="{ ' ico_gou_on ': item.checked }"
                  @click="selsectGoods(item)"
                ></span>
              </div>
              <p>商家:{{ item.shop_name }}</p>
            </div>
            <div class="car_list_t_r">
              <p class="ico_del" @click="delGoods(index)">
                删除
              </p>
            </div>
          </div>
          <div class="car_list_center">
            <div class="car_list_c_l">
              <img :src="'http:' + item.goods_img" alt />
            </div>
            <div class="car_list_c_r">
              <p>{{ item.goods_name }}</p>
              <div class="goods_intor">
                <p class="price">￥{{ item.price }}</p>
                <p class="select_num_input">
                  <span class="ico_sub" @click="sub(item.sales_num, index)">
                  </span>
                  <input
                    class="number_car"
                    type="number"
                    disabled
                    :value="item.sales_num"
                  />
                  <span class="ico_plus" @click="plus(item.sales_num, index)">
                  </span>
                </p>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="car_footer" v-show="showfoot">
        <div class="car_footer_l" v-show="!checkAllFlag">
          <span class="ico_gou" @click="checkAll(true)"></span>
          <p>全选</p>
        </div>
        <div class="car_footer_l" v-show="checkAllFlag">
          <span class="ico_gou_on" @click="checkAll(false)"></span>
          <p>取消全选</p>
        </div>
        <div class="car_footer_r">
          <span>合计：{{ totalMoney }}</span>
          <p @click="toDo()">结算({{ checkNum }})</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { MessageBox} from 'mint-ui'
export default {
  data() {
    return {
      shopId: "",
      list: [],
      selectId: [],
      checkNum: 0,
      totalMoney: 0,
      checkAllFlag: false,
      showfoot: true
    };
  },
  created() {
    this.shopId = this.$route.query.id;
    this.listInfo();
  },
  methods: {
    // 点击结算
    toDo() {
      if (this.checkNum <= 0) {
        alert("前先选择需要结算的商品");
      } else {
        var isList = [];
        for (var i in this.list) {
          if (this.list[i].checked) {
            isList.push(this.list[i]);
          }
        }
        console.log(isList);
      }
    },
    // 单选
    selsectGoods(item) {
      console.log(item);
      if (typeof item.checked == "undefined") {
        this.$set(item, "checked", true);
        this.checkNum++;
      } else {
        item.checked = !item.checked;
        item.checked ? this.checkNum++ : this.checkNum--;
      }
      this.totalPrice();
      this.list.length == this.checkNum
        ? this.checkAll(true)
        : (this.checkAllFlag = false);
    },
    // 全选
    checkAll(flag) {
      console.log(12)
      console.log(flag);
      this.checkAllFlag = flag;
      var _this = this;
      flag ? (this.checkNum = this.list.length) : (this.checkNum = 0);
      this.list.forEach(function(item) {
        if (typeof item.checked == "undefined") {
          _this.$set(item, "checked", _this.checkAllFlag);
        } else {
          item.checked = _this.checkAllFlag;
        }
      });
      this.totalPrice();
    },
    // 数量减
    sub(num, index) {
      if (parseInt(num) <= 1) {
        this.list[index].sales_num = 1;
      } else {
        this.list[index].sales_num = parseInt(this.list[index].sales_num) - 1;
      }
      this.totalPrice();
    },
    // 数量加
    plus(num, index) {
      this.list[index].sales_num = parseInt(this.list[index].sales_num) + 1;
      this.totalPrice();
    },
    // 删除
    delGoods(index) {
      console.log(index);
      MessageBox.confirm("", {
        title: "",
        message: "确定删除该商品吗？",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(action => {
          if (action == "confirm") {
            this.list.splice(index, 1);
            if (this.list.length <= 0) {
              this.showfoot = false;
            }
            // this.listInfo();
            // this.checkAll(false);
          }
        })
        .catch();
    },
    // 求总价
    totalPrice() {
      var _this = this;
      this.totalMoney = 0;
      this.list.forEach((item) => {
        if (item.checked) {
          _this.totalMoney += item.price * item.sales_num;
        }
      });
    },
    listInfo() {
      var that = this;
      this.$axios.get("http://localhost:8080/data.json").then(function(obj) {
        that.list = obj.data.list;
      });
    }
  },
  mounted() {
    this.listInfo();
  }
};
</script>
<style scoped lang="less">
p {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 15px;
}
header {
  width: 100%;
  height: 50px;
  background: pink;
  text-align: center;
  line-height: 50px;
  font-size: 15px;
  color: #000;
  position: fixed;
}
.shop_car_body {
  float: left;
  margin-top: 50px;
  width: 100%;
}
.page {
  width: 100%;
  float: left;
  height: 610px;
  overflow: auto;
}
li {
  list-style: none;
  width: 100%;
  float: left;
}
.icon_li {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: blue;
  margin: -3px 10px 0 10px;
}
.ico_gou {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: blue;
  margin: -3px 10px 0 10px;
}
.ico_gou_on {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: blue;
  margin: -3px 10px 0 10px;
}
.ico_gou_on {
  background: peru;
}
.car_list_t_l {
  width: 50%;
  float: left;
  line-height: 40px;
  display: flex;
  align-items: center;
}
.ico_del {
  width: 42%;
  float: left;
  line-height: 40px;
  text-align: right;
  padding-right: 20px;
}
.car_list_c_l {
  width: 30%;
  float: left;
  margin: 0 10px 0 10px;
}
.car_list_c_l img {
  display: block;
  width: 100%;
  height: 100%;
}
.car_list_c_r {
  width: 60%;
  float: left;
}
.car_list_c_r p {
  width: 100%;
  text-align: left;
  float: left;
  font-size: 13px;
  line-height: 20px;
}
.goods_intor {
  float: left;
}
.goods_intor .price {
  color: red;
}
.select_num_input {
  width: 100%;
  margin-top: 10px;
  float: left;
}
.ico_sub {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: left;
  background: deeppink;
}
.ico_plus {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: left;
  background: deeppink;
}
.ico_plus {
  background: deepskyblue;
}
.number_car {
  width: 30px;
  float: left;
  margin: 0 15px 0 15px;
  text-align: center;
}
.car_footer {
  float: left;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
}
.car_footer p {
  text-align: left;
}
.car_footer_r span{
  float: left;
  margin-top: 13px;
}
.car_footer_r {
  float: left;
  width: 45%;
}
.car_footer_l {
  float: left;
  width: 45%;
}
.car_footer_r p {
  text-align: right;
}
.car_footer_l .ico_gou {
  margin-top: 19px;
}
.car_footer_l .ico_gou_on {
  margin-top: 19px;
}
.car_list_center {
  float: left;
  width: 100%;
}
</style>